<template>
    <div class="medal-container">
      <navbar :title="$t('medal_set_title')"></navbar>
      <div class="medal-list">
        <!--标题-->
        <div class="title-wrapper">
          <span class="title">{{$t('medal_has_medal')}}:</span>
          <span class="num">{{this.hasDataTotal?this.hasDataTotal : 0}}</span>
          <van-button plain type="info"  class="button" @click="saveMeal">{{$t('medal_show_page')}}</van-button>
        </div>
        <!--勋章列表-->
        <div class="medal-item-wrapper">
          <div align="center" v-if="this.hasData.length<=0">
            <img class="img-nodata" src="../../../static/images/no-data.png" alt=""/>
            <p class="color999">{{ $t("no_data") }}</p>
          </div>
          <div class="medal-item" v-for="(item,index) in this.hasData" :key="index" @click="selectMedal(item)">
              <img :src="item.activityImg" alt="">
              <p class="medal-name">{{item.cnName}}</p>
              <div @click.stop="selectMedalCheckbox(item)">
                <van-checkbox v-model="item.homePageDisplay" :bind-group="false" :icon-size="15" class="select-checkbox"></van-checkbox>
              </div>
          </div>
        </div>
        <!--标题-->
        <div class="title-wrapper">
          <span class="title">{{$t('medal_unattained_medal')}}:</span>
          <span class="num">{{this.notHasDataTotal?this.notHasDataTotal:0}}</span>
        </div>
        <!--勋章列表-->
        <div class="medal-item-wrapper">
          <div align="center" v-if="this.notHasData.length<=0">
              <img class="img-nodata" src="../../../static/images/no-data.png" alt=""/>
              <p class="color999">{{ $t("no_data") }}</p>
            </div>
          <div class="medal-item" v-for="(item,index) in this.notHasData" :key="index" @click="selectMedal(item)">
            <img :src="item.unActivityImg" alt="">
            <p class="medal-name">{{item.cnName}}</p>
          </div>
        </div>
        <!--已获得规则-->
        <div class="title-wrapper">
          <span class="title">{{$t('medal_mine_data')}}:</span>
        </div>
        <div v-if="completionRule">
          <div class="rule-wrap">
              <div class="rule-item">
                <p>{{$t('medal_loginCount')}}:</p>
                <p>{{completionRule.loginCount?completionRule.loginCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_commentCount')}}:</p>
                <p>{{completionRule.commentCount?completionRule.commentCount.countValue:0}}</p>
              </div>
<!--              <div class="rule-item">-->
<!--                <p>{{$t('medal_groupCommentCount')}}:</p>-->
<!--                <p>{{completionRule.groupCommentCount?completionRule.groupCommentCount.countValue:0}}</p>-->
<!--              </div>-->
<!--              <div class="rule-item">-->
<!--                <p>{{$t('medal_groupPostingCount')}}:</p>-->
<!--                <p>{{completionRule.groupPostingCount?completionRule.groupPostingCount.countValue:0}}</p>-->
<!--              </div>-->
              <div class="rule-item">
                <p>{{$t('medal_sumStudyTimeCount')}}:</p>
                <p>{{completionRule.sumStudyTimeCount?completionRule.sumStudyTimeCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_accomplishOptionalCourseCount')}}:</p>
                <p>{{completionRule.accomplishOptionalCourseCount?completionRule.accomplishOptionalCourseCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_accomplishCompulsoryCourseCount')}}:</p>
                <p>{{completionRule.accomplishCompulsoryCourseCount?completionRule.accomplishCompulsoryCourseCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_integralCount')}}:</p>
                <p>{{completionRule.integralCount?completionRule.integralCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_quizCount')}}:</p>
                <p>{{completionRule.quizCount?completionRule.quizCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_inviteCount')}}:</p>
                <p>{{completionRule.inviteCount?completionRule.inviteCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_answerCount')}}:</p>
                <p>{{completionRule.answerCount?completionRule.answerCount.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_acceptAnswer')}}:</p>
                <p>{{completionRule.acceptAnswer?completionRule.acceptAnswer.countValue:0}}</p>
              </div>
              <div class="rule-item">
                <p>{{$t('medal_browseKnowledgeCount')}}:</p>
                <p>{{completionRule.browseKnowledgeCount?completionRule.browseKnowledgeCount.countValue:0}}</p>
              </div>
            <div class="rule-item">
              <p>{{$t('medal_rule_15')}}:</p>
              <p>{{completionRule.circleBrowsKnowledge?completionRule.circleBrowsKnowledge.countValue:0}}</p>
            </div>
            <div class="rule-item">
              <p>{{$t('medal_rule_14')}}:</p>
              <p>{{completionRule.circleUploadKnowledge?completionRule.circleUploadKnowledge.countValue:0}}</p>
            </div>
            <div class="rule-item">
              <p>{{$t('medal_rule_13')}}:</p>
              <p>{{completionRule.circleParticipantTopic?completionRule.circleParticipantTopic.countValue:0}}</p>
            </div>
            <div class="rule-item">
              <p>{{$t('medal_rule_12')}}:</p>
              <p>{{completionRule.circlePublishTopic?completionRule.circlePublishTopic.countValue:0}}</p>
            </div>
          </div>
        </div>
        <div v-else>
          <div align="center">
            <img style="width: 50%" src="../../../static/images/no-data.png" alt=""/>
            <p class="color999">{{ $t("no_data") }}</p>
          </div>
        </div>
      </div>
      <!--选择提示层-->
      <van-notify v-model="notifyMastSwitch" type="warning">
        <span>{{$t('medal_most_warning')}}</span>
      </van-notify>
      <van-notify v-model="notifyLeastSwitch" type="warning">
        <span>{{$t('medal_least_warning')}}</span>
      </van-notify>
      <!-- 显示gif动画 -->
      <van-overlay :show="showGif" @click="showGif = false" class-name="show-gif" z-index="999">
        <van-image @click.stop fit="contain" width="200" :src="activityGif"/>
      </van-overlay>
    </div>
</template>

<script>
import {Button, Checkbox, CheckboxGroup, Notify, Dialog, Overlay, Image as VanImage} from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'medalManagement',
    components: {
        CommonLoading,
        [Button.name]: Button,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [Notify.Component.name]: Notify.Component,
        [Dialog.Component.name]: Dialog.Component,
        [Overlay.name]: Overlay,
        [VanImage.name]: VanImage
    },
    data() {
        return {
            showGif: false, // 显示动画
            activityGif: null, // GIF图
            isTop: false,
            isLoading: false,
            hasData: [],
            completionRule: {},
            notifyMastSwitch: false,
            notifyLeastSwitch: false,
            selectedIds: [],
            hasDataTotal: 0,
            notHasData: [],
            notHasDataTotal: 0,
            pageHasData: {
                pageSize: 50,
                pageNo: 1
            },
            pageNoHasData: {
                pageSize: 50,
                pageNo: 1
            }
        };
    },
    created() {
        this.getHasMedal();
        this.getNoHasMedal();
        this.getUserCompletionRule();
    },
    methods: {
        /**
         * 选择标签显示到首页
         */
        selectMedal(item) {
            Dialog.confirm({
                title: item.cnName,
                message: item.cnIntr,
                cancelButtonText: this.$t('see_gif'),
                showCancelButton: item.activityGif !== null && item.activityGif !== ''
            }).then(() => {}).catch(action => {
                if (action === 'cancel') {
                    this.showGif = true;
                    this.activityGif = item.activityGif;
                }
            });
        },
        /**
         * 选择复选框事件
         */
        selectMedalCheckbox(item) {
            let index = this.selectedIds.indexOf(item.id);
            let itemIndex = this.hasData.indexOf(item);
            if (index !== -1) {
                this.selectedIds.splice(index, 1);
                this.hasData[itemIndex].homePageDisplay = false;
            } else {
                this.selectedIds.push(item.id);
                this.hasData[itemIndex].homePageDisplay = true;
            }
        },
        /**
         * 获取已获得勋章
         */
        getHasMedal() {
            this.$axios({
                method: 'GET',
                url: '/app/medal/personnel/has/medal',
                params: {
                    ...this.pageHasData
                }
            }).then(res => {
                this.hasData = res.data.results;
                for (let i = 0; i < res.data.results.length; i++) {
                    if (res.data.results[i].homePageDisplay) {
                        this.selectedIds.push(res.data.results[i].id);
                    }
                }
                this.hasDataTotal = res.data.totalRecord;
            });
        },
        /**
         * 未获取勋章
         */
        getNoHasMedal() {
            this.$axios({
                method: 'GET',
                url: '/app/medal/personnel/unattained/medal',
                params: {
                    ...this.pageHasData
                }
            }).then(res => {
                this.notHasData = res.data.results;
                this.notHasDataTotal = res.data.totalRecord;
            });
        },
        /**
         * 选择勋章
         */
        saveMeal() {
            let length = this.selectedIds.length;
            if (length <= 0) {
                this.showLeastNotify();
                return false;
            }
            if (length > 3) {
                this.showMastNotify();
                return false;
            }
            //设置勋章显示
            this.$axios({
                method: 'POST',
                url: '/app/medal/personnel/exhibition',
                data: this.selectedIds
            }).then(res => {
                this.$toast(this.$t('set_ok'));
                this.$router.go(-1);
            });
        },
        /**
         * 获取用户当前完成的规则
         */
        getUserCompletionRule() {
            this.$axios({
                method: 'GET',
                url: '/app/medal/personnel/completion'
            }).then(res => {
                if (res.data.errMsg) {
                    let data = JSON.parse(res.data.errMsg);
                    this.completionRule = data;
                }
            });
        },
        /**
         * 信息提示
         */
        showMastNotify() {
            this.notifyMastSwitch = true;
            setTimeout(() => {
                this.notifyMastSwitch = false;
            }, 2000);
        },
        showLeastNotify() {
            this.notifyLeastSwitch = true;
            setTimeout(() => {
                this.notifyLeastSwitch = false;
            }, 2000);
        }
    }
};
</script>

<style lang="less" scoped>
  .medal-container{
    .no-data{
      position: absolute;
      height: 100%;
      top:56px
    }
    .medal-list{
      min-height: max-content;
      position: absolute;
      top: 70px;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 0 10px;
      .title-wrapper{
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: bold;
        .button{
          float:right;
          height: 20px;
          flex: 1;
        }
      }
      .medal-item-wrapper{
        display: flex;
        flex-wrap: wrap;
        .img-nodata{
          width: 50%;
        }
        .medal-item{
          position: relative;
          width: 30%;
          margin-bottom: 10px;
          margin-right: 5%;
          text-align: center;
          &:nth-child(3n) {
            margin-right: 0;
          }
          .selected-medal{
            border-style: solid;
            border-width: 1px;
            border-color:#f34f4f;
          }
          p{
            font-size: 12px;
            text-align: center;
            width: 80%;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space:nowrap;
            margin-top: 10px;
            margin: 0 auto;
          }
          img{
            width: 100%;
            height: 30vw;
          }
          .select-checkbox{
            position: absolute;
            right: -6px;
            top: -6px;
          }
        }
      }
    }
    .rule-wrap{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      margin: 10px 0 0 10px;
      .rule-item{
        display: flex;
        width: 90%;
        font-size: 10px;
        margin: 5px 0;
        justify-content: space-between;
      }
    }

  }
  .show-gif {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
